<template>
    <el-table class="Evntable" ref="tableRef" :data="tableData" :row-key="getRowKey" style="width: 100%;height:100%;"
        :key="key">
        <el-table-column label="" width="30">
            <template #default="{ row }">
                <el-icon style="cursor: move;"
                    v-if="row.varName !== '' || row.localValue !== '' || row.description !== ''">
                    <Operation class="drag-handle" />
                </el-icon>
            </template>
        </el-table-column>
        <el-table-column prop="varName" label="变量名" width="200" style="position: relative;">
            <template #default="{ row }">
                <el-input v-model="row.varName" @change="handleChangeValue">
                    <template #suffix>
                        <el-tooltip effect="dark" content="变量名不能为空" placement="top">
                            <el-icon color="#FF0000" class="el-input__icon">
                                <Warning v-if="row.varNameisNull" />
                            </el-icon>
                        </el-tooltip>
                    </template>
                </el-input>
            </template>
        </el-table-column>
        <el-table-column prop="localValue" label="变量值">
            <template #default="{ row }">
                <el-input v-model="row.localValue" @change="handleChangeValue" />
            </template>
        </el-table-column>
        <el-table-column prop="description" label="说明">
            <template #default="{ row }">
                <el-input v-model="row.description" @change="handleChangeValue" />
            </template>
        </el-table-column>
        <el-table-column width="80" align="center">
            <template #header>
                <span style="color:#409eff;cursor: pointer;" @click="handleMultipleEdit">批量编辑</span>
            </template>
            <template #default="{ row }">
                <el-button link @click="removeRow(row)"
                    v-if="row.varName !== '' || row.localValue !== '' || row.description !== ''">
                    <el-icon>
                        <Remove />
                    </el-icon>
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import { Remove, Operation, Warning } from '@element-plus/icons-vue'
import Sortable from "sortablejs"
const tableData = ref([
    { id: 1, varName: '', localValue: '', description: '', varNameisNull: false }
])
let id = 1000
const emit = defineEmits(['changeEditMethod', 'selectedTableData', 'allTableData']) // 定义 success 事件，用于操作成功后的回调
const props = defineProps({
    data: {
        default: () => [] as any
    }
})
const tableRef = ref()
const key = ref(0)

watch(() => props.data,
    () => {
        // 批量编辑后更新表格数据并处理选中
        nextTick(() => {
            tableData.value = props.data.map((item: any, index: any) => {
                if (!item.id) {
                    return {
                        ...item,
                        id: index + 1
                    }
                } else {
                    return {
                        ...item
                    }
                }
            })
            handleTableData()
            rowDrop();
            key.value++
        })
    }, {
    deep: true,
    immediate: true
})

const handleTableData = () => {
    // 是否向下添加一行判断
    const isAllNull = tableData.value.some((k: any) => {
        if (k.varName === '') {
            k.varNameisNull = true
            return true
        } else {
            k.varNameisNull = false
            return false
        }
    })
    // 添加一行并选中
    if (!isAllNull) {
        tableData.value.push({ id: ++id, varName: '', localValue: '', description: '', varNameisNull: false })
    }
}
/**
 * 行拖拽
 * */
const rowDrop = () => {
    const tbody = document.querySelector(".Evntable tbody");
    Sortable.create(tbody, {
        animation: 150, //动画参数
        handle: '.drag-handle',
        onEnd({ newIndex, oldIndex }) {
            const currRow = tableData.value.splice(oldIndex, 1)[0]
            tableData.value.splice(newIndex, 0, currRow)
            handleChangeValue()
            emit('allTableData', tableData.value)
        },
    });
};
/**
 * 表单内容变化时自动增加一行
 * */
const handleChangeValue = () => {
    // 全部数据-用于批量添加
    emit('allTableData', tableData.value)
    handleTableData()
}

/**
 * 获取表格每行的key
 * */
const getRowKey = (row: any) => {
    return row.id;
}

/**
 * 移除一行
 * */
const removeRow = (row: any) => {
    tableData.value.splice(tableData.value.indexOf(row), 1);
    emit('allTableData', tableData.value)
}

/**
 * 点击批量编辑，弹窗
 * */
const handleMultipleEdit = () => {
    emit('changeEditMethod', tableData)
}

</script>

<style scoped lang="scss">
.input-wrap {
    position: relative;

    &:hover {
        .array-icon {
            display: block;
        }
    }

    :deep(.upload-demo) {
        position: relative;
        top: 5px;
    }
}

.array-icon {
    position: absolute;
    top: 8px;
    right: 5px;
    display: none;
}


.suggestion-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 25px;
}

.hide {
    display: flex;
    width: 100%;
    height: 0;
    line-height: 0;
}

:deep(.el-input__wrapper),
:deep(.el-select__wrapper) {
    box-shadow: none;
    border-radius: 0;
    margin-left: -10px;
}


:deep(.el-table__body tr:hover > td) {
    background-color: transparent !important;
    /* 移除背景颜色 */
}

:deep(.el-table__body tr > td) {
    height: 32px;
    line-height: 32px;
    padding: 0;

    .cell {
        padding: 0;
    }
}

.el-form-item--default {
    margin-bottom: 0;
}
</style>